<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<style>
			#box{
				width: 100px;
				height: 100px;
				background: blue;
				border-radius: 10px;
				position: absolute;
				top: 100px;
				left: 100px;
			}
		</style>
	</head>
	<body>
		<div id="box"></div>
		<input type="text"/>
		
	</body>
	<script src="js/jquery-1.8.3.js"></script>
	<script>
		$(function(){
			$("input").keydown(function(){
				console.log("按下键盘")
			})
		})
		$(function(){
			$("body").keydown(function(){
				//按下键盘
			}).keyup(function(){
				//松开键盘
			}).keypress(function(event){
				//  特殊按键式没有 字符获取的 ctrl   alt   
				//获取按下的字符
				// key      按下的字符
				// keyCode  字符所对应的数字
				// ASCII
				// A   ==  65
				// Z   ==  90
				// a   ==  97
				// z   ==  122
				let top = $("#box").css("top");
				let left = $("#box").css("left");
				top = parseInt(top);
				left = parseInt(left);
				if(event.key == 'W' || event.key == 'w'){
					//向上移动
					top -= 10;
					$("#box").css("top",top+"px");
				}else if(event.key == 'S' || event.key == 's'){
					//向下移动
					top+=10
					$("#box").css("top",top+"px");
				}else if(event.key == "A" || event.key == 'a'){
					// 左
					left -= 10
					$("#box").css("left",left+"px");
				}else{
					left += 10
					$("#box").css("left",left+"px");
				}
			})
		})
		
		$(function(){
			$(window).resize(function(){
				//窗体大小发生变化了
				console.log("大小变化了")
			})
		})
		
		$(function(){
			$("#box").click()
			// 绑定事件  添加事件
			//  1.8        live
			$("#box").live("click",function(){})
			//  1.8 - 3.0  bind
			$("#box").bind("click",function(){})
			$("#box").unbind("click");
			
			//  任意版本使用    on
			$("#box").on("click",function(){})
			$("#box").off("click");
			
			
		})
	
	</script>
</html>